<script setup lang="ts">
import type { IShopDetail, IDiscount, IDiscountContent } from '@/biz/repo/shop'
import { useToggleShow } from '@/biz/hooks/useToggle'
import { computed } from 'vue'
interface IProps {
  data: IShopDetail
}
const props = defineProps<IProps>()

//服务取前三
const topThreeServices = computed(() => props.data.services.slice(0, 3))

//折扣枚举
enum DiscountsEnums {
  Reduction = 1,
  Delivery = 2,
  Special = 3,
  Optional = 4
}
//从数据里面获取类型为1的满减数据
const reductionList = computed(() => {
  const data = props.data.discounts.find((v) => v.type === DiscountsEnums.Reduction)
  return data ? data.content : []
})
//第二种直接template中直接使用v-for遍历数据；第二种是采用map
const reductionListLabel = computed(() => {
  return reductionList.value.map((v) => `满${v.if}减${v.count}`)
})

//点击红包出现对应的模态界面，采用之前的状态去反的useToggle
const [isPopuShow, showPopup] = useToggleShow(false)

//格式化折扣拼接数据
const formetter = (v: IDiscount) => {
  if (v.type === DiscountsEnums.Reduction) {
    return '全店' + v.content.map((cv: IDiscountContent) => `满${cv.if}减${cv.count}`).join(',')
  }
  if (v.type === DiscountsEnums.Delivery) {
    return v.content.map((cv: IDiscountContent) => `满${cv.if}减${cv.count}，${cv.limit}`).join(',')
  }
  if (v.type === DiscountsEnums.Special) {
    return v.content.map((cv: IDiscountContent) => `特价 ${cv.count} 元起`).join(',')
  }
  if (v.type === DiscountsEnums.Optional) {
    return v.content.map((cv: IDiscountContent) => cv.label).join(',')
  }
  return ''
}
</script>

<template>
  <div class="shop-header">
    <div class="shop-header__info">
      <div class="info__left">
        <!-- 店铺名字 -->
        <div class="info__left__shop-name">
          {{ data.shopName }}<span v-if="data.branch">({{ data.branch }})</span>
        </div>
        <!-- 配送和月售 -->
        <div class="info__left__delivery">
          <div v-if="data.deliveryTags" class="info__left__delivery-tag op-thin-border">
            {{ data.deliveryTags[0] }}
          </div>
          <div class="info__left__delivery-time">{{ data.deliveryTime }}</div>
          <div class="info__left__monthly-count">月售 {{ data.monthlyCount }}</div>
        </div>
      </div>
      <!-- 店铺图片 -->
      <div class="info__right">
        <img :src="data.postUrl" />
      </div>
    </div>

    <!-- 服务项 -->
    <div class="shop-header__service">
      <div v-for="item in topThreeServices" :key="item.type" class="service">
        <VanIcon name="passed" />
        {{ item.label }}
      </div>
    </div>

    <!-- 公告 -->
    <div class="shop-header__announcement">公告: {{ data.announcement }}</div>

    <!-- 红包 -->
    <div class="shop-header__redbags">
      <div v-for="item in data.redbags" :key="item.type" class="redbag">
        <span class="redbag-left">
          ￥<span class="count">{{ item.count }}</span>
          <span>{{ item.if }}</span>
        </span>
        <span class="redbag-right">领</span>
      </div>
    </div>

    <!-- 满减 -->
    <div class="shop-header__discounts" @click="showPopup">
      <!-- 第一种方案 -->
      <!-- <div v-for="item in reductionList" :key="item.count">满{{ item.if }}减{{ item.count }}</div> -->
      <!-- 第二种方案 -->
      <div class="discounts__reduction">
        <div
          v-for="item in reductionListLabel"
          :key="item"
          class="discounts__reduction__data op-thin-border"
        >
          {{ item }}
        </div>
      </div>
      <VanIcon name="arrow-down" color="rgb(207,207,207)" />
    </div>
  </div>
  <!-- 点击红包或满减底部弹起模态面板 -->
  <VanActionSheet
    class="shop-header__action-sheet"
    style="background: rgb(244, 244, 244) !important"
    v-model:show="isPopuShow"
    title="红包优惠"
  >
    <div class="action-sheet__content">
      <!-- 红包 -->
      <h4>红包</h4>
      <div v-for="item in reductionList" :key="item.count" class="content__redbags">
        <div class="left">
          <div class="count">
            <span class="symbol">￥</span><span class="num">{{ item.count }}</span>
          </div>
        </div>
        <div class="center">
          <div class="type">店铺专享红包</div>
          <div class="detail">满￥{{ item.if }}可用2022.01.12到期</div>
        </div>
        <div class="right">
          <div class="receive">领取</div>
        </div>
      </div>
      <!-- 商家会员专享 -->
      <h4>商家会员专享</h4>
      <div class="membership">
        <div class="left flex-col">
          <div class="count"><span class="symbol">￥</span><span class="num">5</span></div>
          <div class="detail">满0.01元可用</div>
        </div>
        <div class="center">
          <div class="type">配送费满减</div>
          <div class="detail">全场可用，获得后30天内有效</div>
        </div>
        <div class="right">
          <div class="open">立即开通</div>
        </div>
      </div>
      <!-- 优惠 -->
      <h4>优惠</h4>
      <div class="discount">
        <div v-for="item in data.discounts" :key="item.type">
          <div>{{ item.label }}</div>
          <div>{{ formetter(item) }}</div>
        </div>
      </div>
    </div>
  </VanActionSheet>
</template>

<style lang="scss" scoped>
@import '@/assets/mixins.scss';
.shop-header {
  background: white;
  border-radius: 10px;
  font-size: 12px;
  padding: 10px;
  margin: var(--op-page-padding);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

  &__info {
    display: flex;
    margin-bottom: 5px;
    .info__left {
      flex: 1;
      &__shop-name {
        @include ellipse;
        font-size: 19px;
        font-weight: bold;
        width: 90%;
        margin: 6px 0 8px 0;
      }
      &__delivery {
        display: flex;
      }
      &__delivery-tag {
        color: var(--op-primary-color);
        padding: 1px 5px;
        border-radius: 5px;
        &::before {
          border: 1px solid var(--op-primary-color);
        }
      }
      &__delivery-time {
        margin-left: 10px;
      }
      &__monthly-count {
        margin-left: 10px;
      }
    }
    .info__right {
      img {
        width: 50px;
        height: 50px;
      }
    }
  }

  &__service {
    display: flex;
    margin-bottom: 5px;
    .service {
      margin-right: 5px;
    }
  }

  &__announcement {
    @include ellipse;
  }

  &__redbags {
    display: flex;
    margin-top: 10px;
    margin-bottom: 5px;
    .redbag {
      display: flex;
      margin-right: 5px;
      color: white;
      .redbag-left {
        display: flex;
        align-items: center;
        padding: 2px 4px;
        border-radius: 4px 2px 2px 4px;
        border-right: 2px dashed rgb(252, 91, 68);
        background: linear-gradient(to right, rgb(252, 120, 85), rgb(252, 91, 68));
        .count {
          font-size: 18px;
          margin-right: 4px;
        }
      }
    }
    .redbag-right {
      align-items: center;
      display: flex;
      padding: 2px 10px 2px 4px;
      background: rgb(252, 91, 68);
      border-radius: 2px 4px 4px 2px;
    }
  }

  &__discounts {
    display: flex;
    margin-top: 10px;
    .discounts__reduction {
      display: flex;
      flex: 1;
      &__data {
        display: inline-block;
        color: rgb(247, 68, 68);
        padding: 0 4px;
        margin-right: 5px;
        margin-bottom: 2px;
        &::before {
          border: 0.0625rem solid rgb(247, 68, 68);
        }
      }
    }
  }

  &__action-sheet {
    .action-sheet__content {
      margin: 20px 10px;
      h4 {
        font-size: 15px;
        margin: 10px 0;
      }
      .content__redbags,
      .membership {
        display: flex;
        background: white;
        margin-bottom: 10px;
        padding: 25px 0;
        border-radius: 10px;
        .symbol {
          font-weight: bold;
        }
        .num {
          font-size: 30px;
          line-height: 0.7;
          font-weight: bold;
          margin-bottom: 3px;
        }

        .left {
          width: 90px;
          text-align: center;
          @include vertical;
        }
        .flex-col {
          flex-direction: column;
        }
        .detail {
          font-size: 12px;
          color: var(--van-gray-7);
        }
        .center {
          flex: 1;
          .type {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
          }
        }
        .right {
          width: 90px;
          @include vertical;
          .receive {
            @include vertical;
            font-size: 13px;
            width: 75px;
            height: 30px;
            background: linear-gradient(to right, rgb(253, 113, 78), rgb(252, 77, 60));
            color: white;
            border-radius: 15px;
          }
          .open {
            @include vertical;
            font-size: 13px;
            width: 75px;
            height: 30px;
            background: linear-gradient(to right, rgb(241, 216, 191), rgb(230, 185, 155));
            color: rgb(86, 42, 31);
            border-radius: 15px;
          }
        }
      }
      .content__redbags {
        .count {
          color: rgb(252, 76, 60);
        }
      }
      .membership {
        .count {
          color: rgb(133, 71, 0);
          display: flex;
          align-items: flex-end;
        }
      }
    }
  }
}
</style>
